<template>
  <div>
    <el-dialog v-model="dialog" title="选择用户" width="70%">
      <el-container style="min-height: 450px">
        <el-aside width="200px">
          <el-input
            placeholder="请输入关键字过滤"
            clearable
            prefix-icon="el-icon-search"
            style="margin-bottom: 20px"
          />
          <el-tree
            :data="state.treeData.data"
            :props="defaultProps"
            @node-click="onClick"
          />
        </el-aside>
        <el-container>
          <el-header class="selector-header">
            <el-input
              v-model="state.where.keyValue"
              class="mr10"
              placeholder="请输入用户真实姓名"
              prefix-icon="el-icon-search"
              style="max-width: 180px"
            ></el-input>
            <el-button type="primary" class="ml10" @click="onSearch()">
              <el-icon>
                <elementSearch />
              </el-icon>
              查询
            </el-button>
            <el-button @click="onReset()">
              <el-icon>
                <elementRefreshRight />
              </el-icon>
              重置</el-button
            >
          </el-header>
          <el-main>
            <wg-table
              ref="tableRef"
              :selection="true"
              :border="true"
              url="/api/system/user/getPageList"
              :columns="state.columns"
              :where="state.where"
              
            ></wg-table>
          </el-main>
        </el-container>
      </el-container>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="onCancel">取 消</el-button>
          <el-button type="primary" @click="onSubmit()" 
            >确 定</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import {
  getCurrentInstance,
  reactive,
  ref,
  defineProps,
  onMounted,
  watch,
  defineEmits,
} from "vue";
import { getOrganizationalList } from "/@/api/org/index";
import WgTable from "/@/components/wigem/table.vue";
const tableRef = ref();
const proxy = getCurrentInstance();
const emit = defineEmits();
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
  dialog: {
    type: Boolean,
    default: false,
  },
});
const defaultProps = {
  children: "children",
  label: "text",
};
const state: any = reactive({
  isShowDialog: false,
  columns: [
    { type: "index", label: "序号", width: 80 },
    { prop: "userName", label: "用户名", sortable: true },
    { prop: "realName", label: "真实姓名", sortable: true },

    {
      prop: "mobilePhone",
      label: "手机号",
      width: 150,
    },
    {
      prop: "enableMark",
      label: "有效",
      sortable: true,
      dictionaryCode: "enable",
    },
  ],
  where: {
    keyValue: "",
  },
  treeData: {
    data: [],
  },
  dialog: false,
});
//初始化组织架构数据
const initStructureData = () => {
  const query = {};
  query["queryJson"] = JSON.stringify({ keyValue: "" });
  getOrganizationalList(query).then((res) => {
    state.treeData.data = res.data;

  });
};

const call = () => {
  emit("close");
};

// 关闭弹窗
const closeDialog = () => {
  state.dialog = false;
};

//查询
const onSearch = () => {
  tableRef.value.load();
};
//重置
const onReset = () => {
  state.where.keyValue = "";
  tableRef.value.load();
};
// 取消
const onCancel = () => {
  call();
};
//页面加载
onMounted(() => {
  initStructureData();
});
// watch(
//   () => props.dialog,
//   () => state.options
// );
</script>

<style scoped>
.selector-header {
  --el-header-height: 35px;
}
</style>